<template>
  <div>
    <div>当前num为：{{ num }}</div>
    <div>当前numCopy为（readonly）：{{ numCopy }}</div>

    <el-button type="primary" @click="changeNum">修改数字num</el-button>
    <el-button type="primary" @click="changeNumCopy">修改数字numCopy</el-button>

    <br>
    <hr>
    <br>

    <div>
      car的品牌：{{ car.brand }}， car的选项：颜色：{{ car.options.color }}，价格：{{ car.options.price }}万

      <br>
      carCopy的品牌（readonly）：{{ carCopy.brand }}， carCopy的选项：颜色：{{ carCopy.options.color }}，价格：{{ carCopy.options.price }}万
      <br>
      carShallowCopy的品牌（shallowReadonly）：{{ carShallowCopy.brand }}， carCopy的选项：颜色：{{ carShallowCopy.options.color }}，价格：{{ carShallowCopy.options.price }}万

      <div>
        <el-button type="primary" @click="changeBrand">修改品牌</el-button>
        <el-button type="primary" @click="changeColor">修改颜色</el-button>
        <el-button type="primary" @click="changePrice">修改价格</el-button>
      </div>
      <div>
        <el-button type="primary" @click="changeBrand3">修改品牌carShallowCopy</el-button>
        <el-button type="primary" @click="changeColor3">修改颜色carShallowCopy</el-button>
        <el-button type="primary" @click="changePrice3">修改价格carShallowCopy</el-button>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
const num = ref(0)
// 不要写.value。要保持num到numCopy的响应式的。
const numCopy = readonly(num)
// 可以修改
const changeNum = () => {
  num.value += 1
}
// 不可以被修改了。
const changeNumCopy = () => {
  numCopy.value += 1
}

const car = reactive({
  brand:'宝马',
  options:{
    color: '红色',
    price: 100
  }
})

const carCopy = readonly(car)
const carShallowCopy = shallowReadonly(car)

const changeBrand = ()=>{
  car.brand += '~'
}
const changeColor = ()=>{
  car.options.color += '~'
}
const changePrice = ()=>{
  car.options.price += 1
}

const changeBrand3 = ()=>{
  carShallowCopy.brand += '~'
}
const changeColor3 = ()=>{
  carShallowCopy.options.color += '~'
}
const changePrice3 = ()=>{
  carShallowCopy.options.price += 1
}
</script>

<style scoped></style>
